<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" animated>
        <a-tab-pane key="bar" tab="柱状图">
          <a-row>
            <a-col :span="10">
              <a-radio-group v-model:value="barType" @change="statisticst">
                <a-radio-button value="year">是否质差</a-radio-button>
                <a-radio-button value="month">是否端网不匹配</a-radio-button>
                <a-radio-button value="category">是否近三个月障碍</a-radio-button>
                <a-radio-button value="cabinet">是否中高值</a-radio-button>
                <!--                <a-radio-button value="cabinet">按柜号统计</a-radio-button>-->
              </a-radio-group>
            </a-col>
          </a-row>
          <Bar :chartData="dataSource" height="50vh" />
        </a-tab-pane>
        <a-tab-pane key="pie" tab="饼状图" force-render>
          <a-row :gutter="24">
            <a-col :span="10">
              <a-radio-group v-model:value="pieType" @change="statisticst">
                <a-radio-button value="year">是否质差</a-radio-button>
                <a-radio-button value="month">是否端网不匹配</a-radio-button>
                <a-radio-button value="category">是否近三个月障碍</a-radio-button>
                <a-radio-button value="cabinet">是否中高值</a-radio-button>
              </a-radio-group>
            </a-col>
            <Pie :chartData="dataSource" height="40vh" />
          </a-row>
        </a-tab-pane>
      </a-tabs>

      <a-button type="primary" @click="showOpen">查询</a-button>
    </a-card>

    <a-drawer v-model:visible="open" title="数据查询" width="900" placement="right">
      <BasicTable @register="registerTable1" v-if="open" />
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { defHttp } from '/@/utils/http/axios';
  import { ref, unref, reactive } from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import Pie from '/@/components/chart/Pie.vue';
  const activeKey = ref('bar');
  const barType = ref('year');
  const pieType = ref('year');
  const dataSource = ref([]);
  const url = reactive({
    getYearCountInfo: '/syMarketingDepartment/sfzxCartogram',
    getMonthCountInfo: '/syMarketingDepartment/dwbppCartogram',
    getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
    getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
  });
  async function loadDate(url, type, params) {
    dataSource.value = [];
    const res = await defHttp.get({ url, params }, { isTransformResponse: false, errorMessageMode: 'none' });
    // 是否近三个月障碍-是否中高值
    const correspond = { category: getCategoryCountSource, cabinet: getCabinetCountSource };
    if (correspond[type]) return correspond[type](res.result);
    dataSource.value = res.result.map((item: any) => {
      item.value = item.amount;
      return item;
    });
  }
  function getCategoryCountSource(data: any) {
    dataSource.value = data.map((item: any) => ({ value: item.cntrnocount, name: item.classifyname }));
  }
  function getCabinetCountSource(data: any) {
    dataSource.value = data.map((item: any) => ({ value: item.cabinetcocunt, name: item.cabinetname }));
  }
  // 选择统计类别
  function statisticst() {
    if (unref(activeKey) === 'pie') {
      loadDate(getUrl(unref(pieType)), unref(pieType), {});
    } else {
      loadDate(getUrl(unref(barType)), unref(barType), {});
    }
  }
  function getUrl(type) {
    if (type === 'year') return url.getYearCountInfo;
    if (type === 'month') return url.getMonthCountInfo;
    if (type === 'category') return url.getCntrNoCountInfo;
    if (type === 'cabinet') return url.getCabinetCountInfo;
  }

  loadDate(url.getYearCountInfo, 'year', {});

  const open = ref<boolean>(false);

  const urlSrc = ref('/syMarketingDepartment/sfzxList');
  function showOpen() {
    if (barType.value === 'year') {
      urlSrc.value = '/syMarketingDepartment/sfzxList';
    }
    if (barType.value === 'month') {
      urlSrc.value = '/syMarketingDepartment/dwbppList';
    }
    open.value = true;
  }

  import { BasicColumn, BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  const list = (params: any) => defHttp.get({ url: urlSrc.value, params });

  const columns: BasicColumn[] = [
    { title: '用户账号', align: 'center', dataIndex: 'username' },
    { title: '用户姓名', align: 'center', dataIndex: 'realname' },
    { title: '用户年龄', align: 'center', dataIndex: 'age' },
    { title: '用户电话', align: 'center', dataIndex: 'phone' },
  ];
  const { tableContext: tableContext1 } = useListPage({
    tableProps: {
      api: list,
      columns,
      canResize: false,
      useSearchForm: false,
      showTableSetting: false, // 显示表格设置工具
      pagination: true, // 分页信息配置，为 false 不显示分页
      showActionColumn: false, // 是否显示操作列
      size: 'small', //紧凑型表格
      maxHeight: 250,
      showIndexColumn: true,
    },
  });
  const [registerTable1, {}, {}] = tableContext1;
</script>
